<template>
	<view>
		<view :class="{'text-theme': hasChoose}">
			<button type="primary"
			class="topfixed-active"
			style="background-color: #007AFF;color: #fff; align-items: center;" 
			@click="add">点击添加分类</button>
		</view>
		<view class="content">
			<uni-list style="width:95%"  v-for="item in cost_category" :key="item.id">
				<uni-swipe-action>
					<uni-swipe-action-item
					:key="item.id"
					:right-options="options" 
					:auto-close="true" 
					@change="change" 
					@click="bindClick($event,item)">
						<uni-section :title="item.text" type="line"></uni-section>
					</uni-swipe-action-item>
					<uni-swipe-action-item v-for="subItem in item.children"
					:key="subItem.id"
					:right-options="options" 
					:auto-close="true" 
					@change="change" 
					@click="bindClick($event,subItem)">
						<uni-list-item
						:key="subItem.id"
						:title="subItem.text"
						:note="item.text" />
					</uni-swipe-action-item>
				</uni-swipe-action>
			</uni-list>
			<view>
				<xy-dialog
				:title="isEdit == true ? '修改分类' : '添加分类'" 
				:show.sync="showDialog"
				@cancelButton="clickCancel()"
				@confirmButton="submit()">
					<view style="padding: 0 30upx 30upx;">
						<uni-forms ref="addOrUpdateForm" labelAlign="left" :rules="rules" :modelValue="category">
							<uni-forms-item label="名称:" required name="name">
								<uni-easyinput v-model="category.name" placeholder="请输入分类名称" />
							</uni-forms-item>
							<uni-forms-item label="父类:" name="parent">
								<uni-data-picker 
								placeholder="请选择类别" 
								:localdata="parentList" 
								v-model="category.parentId">
								</uni-data-picker>
							</uni-forms-item>
						</uni-forms>
						<button id="submit-button" type="default" :plain="true" @click="submit()"></button>
					</view>
				</xy-dialog>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false,
				isLogin: false,
				showDialog: false,
				cost_category: [],
				parentList: [],
				category: {
					id:'',
					name: '',
					parentId: 0,
					level: 1,
					creator: 'USER',
				},
				options: [{
						text: '编辑',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入分类名称'
						}]
					}
				},
			}
		},
		onLoad() {
			this.getCostCategory();
		},
		onShow() {
			this.isLogin = this.$dry.isLogin();
			if(!this.isLogin){
				uni.showModal({
					title: "信息",
					content: "需要登录后查看，去登录",
					showCancel: false,
					confirmText: "确定",
					success: function (res) {
						if (res.confirm) {
							uni.switchTab({
								url: '../user/user',
							})
						}
					}
				});
			}
			else {
				this.getCostCategory();
			}
		},
		onPullDownRefresh() {
			// console.log('onPullDownRefresh');
			this.getCostCategory();
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '大家都在用这款小工具管理项目，快来试试吧！！！',
		      path: '/pages/index/index'
		    }
		},
		methods: {
			async getCostCategory() {
				this.cost_category = await this.$dry.getCostCategory();
				var newList = [];
				this.cost_category.forEach(e => {
					var arr = e.value.split('-');
					newList.push({
						id: e.id,
						isSys: e.isSys,
						parent: 0,
						text: e.text,
						value: arr[0]
					})
				})
				this.parentList = newList;
			},
			change(e) {
				this.isOpened = e;
				//console.log('返回：', e);
			},
			clickCancel() {
				// this.showDialog = false;
				this[`showDialog`] = false;
				this.isEdit = false;
			},
			submit() {
				this[`showDialog`] = false;
				this.$refs['addOrUpdateForm'].validate().then(res => {
					if(this.isEdit) {
						uni.showLoading({
							title: '正在更新...'
						});
					} else {
						uni.showLoading({
							title: '正在添加...'
						});
					}
					this.addOrUpdateCostCategory();
					setTimeout(() => {
						uni.hideLoading();
						this.getCostCategory();
					}, 2000)
				}).catch(err => {
					uni.showToast({
						title: "操作失败"
					})
				})
			},
			bindClick(e,data) {
				var that = this;
				if(e.index == 0){
					if(data.creator == 'SYSTEM'){
						this.isEdit = false;
						uni.showModal({
							title: "信息",
							content: "不能修改系统目录",
							showCancel: false,
							confirmText: "确定",
						});
					}
					else{
						this.isEdit = true;
						this.category.id = data.id,
						this.category.name = data.text;
						this.category.parentId = data.parentId;
						this[`showDialog`] = true;
					}
				}
				else {
					if(data.creator == 'SYSTEM'){
						uni.showModal({
							title: "信息",
							content: "不能删除系统目录",
							showCancel: false,
							confirmText: "确定",
						});
					}else{
						if(data.parentId == 0){
							if(data.children.length == 0){
								uni.showModal({
									title: "信息",
									content: "确定要删除" + data.text + "吗",
									showCancel: true,
									confirmText: "确定",
									success: function (res) {
										if (res.confirm) {
											that.delCostCategory(data.id);
										}
									}
								});
							}
							else{
								uni.showModal({
									title: "信息",
									content: "该目录还有其它子目录，不可删除",
									showCancel: false,
									confirmText: "确定",
								});
							}
						}else{
							uni.showModal({
								title: "信息",
								content: "确定要删除" + data.text + "吗",
								showCancel: true,
								confirmText: "确定",
								success: function (res) {
									if (res.confirm) {
										that.delCostCategory(data.id);
									}
								}
							});
						}
					}
				}
			},
			add() {
				// this.showDialog = true;
				this[`showDialog`] = true;
			},
			addOrUpdateCostCategory() {
				if(this.category.parentId == 0){
					this.category.level = 1;
				}
				else{
					this.category.level = 2;
				}
				this.category.creator = 'USER';
				var token = this.$dry.getToken();
				if(token){
					var data = {};
					if(!this.isEdit) {
						data = this.$request.run("addCostCategory",token);
					} else {
						data = this.$request.run("updateCostCategory", token);
					}
					uni.request({
						url: data.url,
						method: data.method,
						header: data.header,
						data: this.category,
						success: data => {
							if(this.isEdit) {
								uni.showToast({
									title: "修改成功！",
									duration: 1000
								});
								this.isEdit = false;
							} else {
								uni.showToast({
									title: "添加成功！",
									duration: 1000
								});
							}
							this.getCostCategory();
						}
					})
				}
			},
			delCostCategory(id) {
				var token = this.$dry.getToken();
				if(token){
					var data = this.$request.run("deleteCostCategory", token);
					uni.request({
						url: data.url,
						method: data.method,
						header: data.header,
						data: {
							"id": id
						},
						success: data => {
							if(data.statusCode == 200 && data.data.code == 0){
								uni.showToast({
									title: "删除成功",
									duration: 1000
								});
								this.getCostCategory();
							}
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.content{
		margin-top: 50px;
	}
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.del-button {
		margin-top: -80rpx;
	}
	#submit-button {
		width: 50%;
		height: 100rpx;
		margin-bottom: -120rpx;
		margin-right: -30rpx;
		border: none;
		outline: none;
		z-index: 100;
	}
	.topfixed-active{
	    width: 100%;
	    position: fixed;
	    top: var(--window-top);
	    left: 0;
	    background: #fff;
	    z-index: 9;
	    box-sizing: border-box;
	}
</style>
